<template>
<el-scrollbar class="nav-menu my-scrollbar">
    <el-menu :collapse-transition="false" :collapse="isCollapse" router :default-active="`/${$route.path.split('/')[1]}`" background-color="#070F1C" text-color="#fff" active-text-color="#ffd04b">
        <template v-for="item in menuData">
            <!-- 此菜单下还有子菜单 -->
            <el-submenu v-if="item.childs&&item.entity&&!item.entity.isHide" :key="item.entity.id" :index="item.entity.path">
                <template slot="title">
                    <i :class="`iconfont ${item.entity.icon}`"></i>
                    <span slot="title">{{item.entity.name}}</span>
                </template>
                <!-- 递归 -->
                <sub-menu :menuData="item.childs"></sub-menu>
            </el-submenu>
            <!--一级菜单 -->
            <el-menu-item v-if="!(item.childs&&item.entity)&&!item.entity.isHide" :key="item.entity.id" :index="item.entity.path">
                <i :class="`iconfont ${item.entity.icon}`"></i>
                <span slot="title">{{item.entity.name}}</span>
            </el-menu-item>
        </template>
    </el-menu>
</el-scrollbar>
</template>

<script>
import SubMenu from './SubMenu'
import { mapGetters } from 'vuex'
export default {
    name: 'NavMenu',
    components: {
        SubMenu
    },
    computed: {
        ...mapGetters({
            isCollapse: 'common/getCollapse'
        })
    },
    data () {
        return {
            menuData: [{
                entity: {
                    isHide: false,
                    id: 0,
                    path: '/experiment',
                    icon: 'icon-shiyanguanli',
                    name: '实验管理'
                }
            },
            {
                entity: {
                    isHide: false,
                    id: 1,
                    path: '/data',
                    icon: 'icon-shujuguanli1',
                    name: '数据管理'
                }
            },
            {
                entity: {
                    isHide: false,
                    id: 2,
                    path: '/model',
                    icon: 'icon-moxingguanli',
                    name: '模型管理'
                }
            }
            ]
        }
    }
}
</script>

<style lang="less">
.nav-menu {
    overflow-x: hidden;
    width: 100%;
    height: 100%;

    .show-nav {
        cursor: pointer;
        color: #ffffff;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .show-nav:hover {
        background: rgb(6, 12, 22);
    }
    .is-active {
        background: -webkit-linear-gradient(to right, #05efd7 , #03786c);
        background: -o-linear-gradient(to right, #05efd7, #03786c);
        background: -moz-linear-gradient(to right, #05efd7, #03786c);
        background: linear-gradient(to right, #05efd7 , #03786c);
    }
}
</style>
